<style lang="scss">
  
</style>
<template>  
  <div>
    <el-row :gutter="0">
      <el-carousel :interval="0" arrow="never" height="400px" type="card">
        <el-carousel-item v-for="(item,index) in dataimg" :key="index">
          <div class="grid-content">
            <el-col :md="12" :offset="6">
              <div>
                <img width="100%" :src="item.src">
              </div>
            </el-col>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-row>
    <el-form label-width="70px">
      <el-form-item label="品牌" required>
        <el-select v-model="brandId" clearable filterable placeholder="请选择">
          <el-option
            v-for="item in brandList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类" required>
        <el-select v-model="category1Id" v-on:change="category1Change" filterable placeholder="请选择大类">
          <el-option
             v-for="item in category1List"
             :key="item.id"
             :label="item.name"
             :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="category2Id" filterable placeholder="请选择小类">
          <el-option
             v-for="item in category2List"
             :key="item.id"
             :label="item.name"
             :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" >
        <el-select v-model="sexId" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in sexList"
            :key="item.id"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货号">
        <el-input style="width:20%" v-model="sku" placeholder="货号"></el-input>
      </el-form-item>
      <el-form-item label="颜色">
        <el-input style="width:20%" v-model="color" placeholder="颜色"></el-input>
      </el-form-item>
      <el-form-item label="尺寸">
        <el-input style="width:20%" v-model="size" placeholder="尺寸"></el-input>
      </el-form-item>
      <el-form-item label="价格" required>
        <el-input style="width:10%" v-on:change="priceCheck" placeholder="价格" v-model="price">
          <template slot="prepend">€</template>
        </el-input>
      </el-form-item>
      <el-form-item label="折扣" required>
        <el-input style="width:10%" v-on:change="discountCheck" placeholder="折扣" v-model="discount">
          <template slot="append">%</template>
        </el-input><font color="red">（请输入0-100之间的整数）</font>
      </el-form-item>
      <el-form-item label="预计收货时间" required>
        <el-select v-model="arrivalTime" filterable placeholder="请选择">
          <el-option
            v-for="item in arrivalTimeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="买手" required>
        <el-select v-model="buyerId" filterable placeholder="请选择">
          <el-option
            v-for="item in buyerList"
            :key="item.uid"
            :label="item.nickname"
            :value="item.uid">
          </el-option>
        </el-select>
      </el-form-item>    
    </el-form>
    <el-button type="primary" @click="dataFormQuotesSubmit()" >确定报价</el-button><!--  :loading="surePublishGoodsFlag" -->
  </div>  
</template>

<script>
  export default {
    data() {
      return {
        buyerId:'',
        id:'',
        arrivalTime: '',
        discount:100,
        price:'',
        size:'',
        color:'',
        sku:'',
        brandId:'',
        category1Id:'',
        category2Id:'',
        sexId:'',
        dataimg:[],
        brandList:[],
        category1List:[],
        category2List:[],
        buyerList:[],
        sexList: [
          {
            id:'男',
            name:'男'
          },
          {
            id:'女',
            name:'女'
          },
          {
            id:'中性',
            name:'中性'
          }
        ],
        arrivalTimeList: [
          {
            value: "15",
            label: "15个工作日"
          },
          {
            value: "30",
            label: "30个工作日"
          },
          {
            value: "45",
            label: "45个工作日"
          },
          {
            value: "60",
            label: "60个工作日"
          }
        ]
      }
    },
    computed: {
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight - 50 - 30 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      }
    },
    mounted() {
      this.id = this.$route.query.id.toString();
      this.$http({
        url: this.$http.adornUrl(`/biz/common/getBrands`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.brandList = data.data;
        for (var i = 0; i < this.brandList.length; i++) {
          this.brandList[i].id = this.brandList[i].id + "";
        }
      });
      this.$http({
        url: this.$http.adornUrl(`/biz/categories/listNew`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.category1List = data.categoryList;

        this.init();
      });

      this.$http({
        url: this.$http.adornUrl(`/biz/common/getBuyers`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.buyerList = data.data;
      });
      
    },
    methods: {
      dataFormQuotesSubmit() {
        //先check
        if (this.brandId == '') {
          this.$message.error('请选择品牌');
          return;
        }
        if (this.category1Id == '') {
          this.$message.error('请选择分类');
          return;
        }
        if (this.price == '') {
          this.$message.error('请填写欧洲价格');
          return;
        }
        if (this.discount == '') {
          this.$message.error('请填写折扣');
          return;
        }
        if (this.arrivalTime == '') {
          this.$message.error('请选择预计到货时间');
          return;
        }
        if (this.buyerId == '') {
          this.$message.error('请选择对应的买手');
          return;
        }

        this.$confirm(`确定当前操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/biz/publishCustomers/quotes/${this.id}?brandId=${this.brandId}&categoryId=${this.category2Id == "" ? this.category1Id:this.category2Id}&sex=${this.sexId}&sku=${this.sku}&color=${this.color}&size=${this.size}&eurPrice=${this.price}&discount=${this.discount}&arrivalTime=${this.arrivalTime}&buyerUid=${this.buyerId}`),
            method: "post",
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              if (data.data == "fail") {
                this.$message({
                  message: "操作失败",
                  type: "error",
                  duration: 1500,
                  onClose: () => {
                  }
                });
              } else {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.tabsCloseCurrentHandle();
                    this.$router.push({ path: '/biz-publishCustomers' });
                  }
                });
              }
            } else {
              this.$message.error(data.msg);
            }
          });
        })
      },
      init() {
        this.$http({
          url: this.$http.adornUrl(`/biz/publishCustomers/getCustomerInfo?id=${this.id}`),
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.dataimg = data.data.imageList;

          this.brandId = data.data.brand;
          this.category1Id = data.data.category1;
          for (var i = 0; i < this.category1List.length; i++) {
            if (this.category1List[i].id == (this.category1Id+"")) {
              this.category2List = this.category1List[i].children;
            }
          }
          this.category2Id = data.data.category2;
          
          if (data.data.sex == "1") {
            this.sexId = "男";
          } else if (data.data.sex == "2") {
            this.sexId = "女";
          } else{
            this.sexId = data.data.sex;
          }          

          this.size = data.data.size;
          this.color = data.data.color;
          this.sku = data.data.sku;
        });
      },
      category1Change() {
        for (var i = 0; i < this.category1List.length; i++) {
          if (this.category1Id == this.category1List[i].id) {
            this.category2List = this.category1List[i].children;
            this.category2Id = '';
          }
        }
      },
      priceCheck() {
        var r = /^[0-9]*[1-9][0-9]*$/; //正整数
        var flag = r.test(this.price);
        if (!flag) {
          this.$message({
            message: "请输入正确的欧洲价格",
            type: "warning"
          });

          this.price = "";
        }
      },
      discountCheck() {
        var r = /^[0-9]*[1-9][0-9]*$/; //正整数
        var flag = r.test(this.discount);

        if (!flag || (this.discount < 0 || this.discount > 100)) {
          this.$message({
            message: "请输入0-100之间的整数",
            type: "warning"
          });
          this.discount = 100;
        }
      },
      // tabs, 删除tab
      removeTabHandle (tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            this.$router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
        } else {
          this.menuActiveName = ''
          this.$router.push({ name: 'home' })
        }
      },
      tabsCloseCurrentHandle () {
        this.removeTabHandle(this.mainTabsActiveName)
      }
    }
  }
</script>
